const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
    /* 
    entry:入口起点
    打包时，第一个被访问的源码文件，指示 webpack 应该使用哪个模块（webpack中一切都是模块），来作为构建其内部依赖图的开始。
    webpack可以通过入口，加载整个项目的依赖
    */
    entry: path.resolve(__dirname, '../src/index.js'),


    //Output:出口
    output: {
        //打包后输出的文件夹名称
        path: path.resolve(__dirname, '../build'),
        //输出文件夹里的输出文件
        filename: './js/bundls.js'
    },

    //模式  生产模式,可以直接在服务器上运行
    mode: 'production',

    //模块配置，配置loader
    module: {
        rules: [{
                /* 
                test:后边配置的是一个正则表达式,用来匹配文件名是否符合当前loader的条件
                */
                test: /\.css$/i,
                /* 
                css-loader:为了识别css类型文件进行打包
                style-loader:js把样式放在style标签中,并插入到页面中
                use后如果是一个数组,则是从后向前一致加载
                */
                use: [
                    //use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }, {
                test: /\.less$/i,
                use: [
                    //use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            }, {
                test: /\.(png|jpg|gif|webp)$/,
                //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024, // 小于30kb以下的图片会被打包成base64格式
                    },
                },
                generator: {
                    filename: 'images/[name][ext]'
                }
            },
            //  {
            //     test: /\.(htm|html)$/i,
            //     use: {
            //         loader: 'html-loader'
            //     }
            // }
        ]
    },

    //优化的配置
    optimization: {
        minimizer: [
            // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
            // `...`,
            new CssMinimizerPlugin(),
        ],
    },

    //插件配置
    plugins: [new MiniCssExtractPlugin({
            //输出独立文件的文件名  打包好生成的文件路径 参照出口
            filename: 'css/[name].css'
        }), new HtmlWebpackPlugin({
            //打包后生成的文件名叫index.html
            filename: "index.html",
            //模板  打包的时候参照的某个文件 只参考自己的位置
            template: path.resolve(__dirname,"../public/index.html"),
            minify: {
                collapseWhitespace: true,
                keepClosingSlash: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }
        }), new ESLintPlugin(),
        new CopyWebpackPlugin({
            //patterns 模式
            patterns: [{
                from:path.resolve(__dirname,"../public"), //from 是从哪里复制
                to: "public", //打包目录
                //配置复制时忽略的文件
                globOptions: {
                    ignore: ["**/index.html"]
                }
            }],
        }),

    ],



}